<!--
 * @Author: liaoxing
 * @Date: 2021-11-15 11:34:16
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-02-25 17:55:21
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\views\business\reportcenter\category.vue
-->
<template>
  <div class="dataReportPage">
    <div class="treeBox flex" :style="{width: this.treeBoxWidth + 'px'}">
      <div class="treeContainer">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <div class="elTreeBox">
          <el-tree
            v-loading="loading"
            :data="dataList"
            :props="defaultProps"
            node-key="id"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            :highlight-current="true"
            ref="reportTree"
            default-expand-all
          >
            <span class="custom-tree-node" slot-scope="{ node, data }" @contextmenu.prevent.stop="mouseRightClick($event, data)">
              <!-- 名称数大于10个的 -->
              <span class="jstarfont" :class="{'jstar-wenjianjia': data.children, 'jstar-baobiao1': !data.children, 'color-blue': !node.parent.parent}"></span>
              <template v-if="node.label.length > 5"> 
                <el-tooltip class="item" effect="dark" :content="node.label" placement="top-end">
                  <span class="labelName more" :class="{'color-blue': !node.parent.parent}">{{ node.label }}</span>
                </el-tooltip>
              </template>
              <template v-else>
                <span class="labelName more" :class="{'color-blue': !node.parent.parent}">{{ node.label }}</span>
              </template>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="flexibleBox flex flex-center finger" :style="{left: this.treeBoxWidth + 10 + 'px' }" @click="changeTreeBoxWidth">
      <span class="jstarfont" :class="{'jstar-jiantou_xiangzuoliangci_o': this.treeBoxWidth > 20, 'jstar-jiantou_xiangyouliangci_o': this.treeBoxWidth < 21 }"></span>
    </div>
    <div class="iframeBox">
      <div class="emptyBox flex flex-center" v-if="!iframeUrl">
        <el-empty description="请选择报表"></el-empty>
      </div>
      <iframe v-else :src="iframeUrl" frameborder="no" border="0"></iframe>
    </div>
    <el-dialog title="请选择被授权人" :visible.sync="openAuthorize" width="40%">
      <selectMemberTree :currentReportUser="currentReportUser" :openAuth="openAuthorize" @confirmAuthorize="confirmAuthorize"></selectMemberTree>
    </el-dialog>
    <div class="menuBox" v-if="openMenuBox" :style="menuPosition" @mouseleave="colseMenu()">
      <el-tooltip content="授权" placement="top" effect="dark">
        <span class="jstarfont jstar-fenxiang finger" @click.stop.prevent="openAuthorizeBox()"></span>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import report from "@/api/report/newApi"
import selectMemberTree from "@/components/selectMemberTree/selectMemberTree"
export default {
  name: "dataReportPage",
  data () {
    return {
      menuitem: "datainfo",
      addUrl: "/jmreport/view/",
      filterText: '',
      currentInfo: null,
      dataList: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      iframeUrl: '',
      /* 报表授权 */
      openAuthorize: false,
      currentReportId: '',
      currentReportUser: [],
      loading: false,
      /* 伸缩目录 */
      treeBoxWidth: 200,
      menuPosition: {
        left: null,
        top: null
      },
      openMenuBox: false
    }
  },
  watch: {
    // $route: {
    //   deep: true,
    //   handler: function (value) {
    //     this.currentInfo = value.meta
    //   }
    // },
    filterText(val) {
      this.$refs.reportTree.filter(val);
    }
  },
  created () {
    this.queryPersonReport()
    report.queryReport()
      .then(res => {
        console.log(res)
      })
  },
  components: {
    selectMemberTree
  },
  methods: {
    /* 关闭菜单 */
    colseMenu () {
      this.openMenuBox = false
    },
    /* 右键 */
    mouseRightClick (e, data) {
      console.log(e, data)
      if (data.children) return
      this.currentReportId = data.id
      this.menuPosition = {
        left: e.clientX - 2 + 'px',
        top: e.clientY - 2 + 'px'
      }
      this.openMenuBox = true
    },
    /* 修改目录宽度 */
    changeTreeBoxWidth () {
      this.treeBoxWidth = this.treeBoxWidth === 200 ? 0 : 200
    },
    /* 报表树点击 */
    handleNodeClick(data) {
      this.colseMenu()
      if (data.children) return
      this.iframeUrl = window.repoortURL + this.addUrl + data.id
    },
    /* 报表树过滤 */
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /* 查询个人报表 */
    queryPersonReport () {
      this.loading = true
      this.$report.userReport()
        .then(res => {
          if (res.code === 200) {
            this.dataList = res.data
          }else {
            this.$message.error(res.code + '-' + res.msg)
          }
          this.loading = false
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
    },
     /* 打开授权弹窗 */
    async openAuthorizeBox () {
      await this.getReportDetail(this.currentReportId)
      this.openAuthorize = true
      // this.currentReportId = data.id
    },
    /* 请求报表详情 */
    getReportDetail (id) {
      return new Promise(resolve => {
        this.$report.queryReportById(id)
        .then(res => {
          if (res.code === 200) {
            this.currentReportUser = res.data.rows[0].members
          }else {
            this.$message.error(res.code + '-' + res.msg)
          }
          resolve()
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
      })
    },
    /* 确认授权 */
    confirmAuthorize (list) {
      this.$report.authorizeReport(this.currentReportId, {userId: list})
        .then(res => {
          if (res.code === 200) {
            this.$message.success("授权成功！")
            this.openAuthorize = false
            this.queryPersonReport()
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
        .catch(e => {
          this.$message.error(e.toString())
        })
    },
  }
}
</script>

<style lang="less">
.dataReportPage{
  width: 100%;
  height: calc(100vh - 85px);
  position: relative;
  .el-tree-node__children{
    font-size: 12px;
  }

  .el-tree-node__content{
    height: 40px;
    line-height: 40px;
    font-size: 13px;
  }

  .el-checkbox__input.is-disabled .el-checkbox__inner{
    display: none;
  }
  .flexibleBox{
    position: absolute;
    left: 210px;
    bottom: 10px;
    height: 20px;
    width: 20px;
    background-color: white;
    // border-left: 1px solid gainsboro;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 2px 1px rgb(158, 158, 158);
    z-index: 9999;
    transition: 0.2s linear;
    opacity: 0.4;
    span{
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      // background-color: #409eff;
      // border-radius: 10px;
    }
    &:hover{
      opacity: 1;
    }
  }
  .menuBox{
    position: fixed;
    padding: 10PX;
    box-shadow: 0 0 2px 1px rgb(224, 224, 224);
    z-index: 999;
    background-color: white;
    border-radius: 4px;
  }
  .treeBox{
    transition: 0.2s linear;
    box-shadow: 0 0 2px 1px rgb(199, 199, 199);
    width: 200px;
    height: 100%;
    box-sizing: border-box;
    // padding: 10px;
    overflow: hidden;
    background-color: white;
    float: left;
    position: relative;
    z-index: 99;
    .treeContainer{
      width: 200px;
      height: 100%;
      // box-sizing: border-box;
      // padding: 10px;
      .el-input{
        box-sizing: border-box;
        padding: 10px;
      }
      .elTreeBox{
        height: calc(100% - 56px);
        width: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding: 0 10px;
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        position: relative;
        .navBox{
          width: 30px;
          height: 30px;
          background-color: white;
          box-shadow: 0 0 2px 1px rgb(214, 214, 214);
          border-radius: 4px;
          position: absolute;
          top: 20px;
          right: 0;
          z-index: 999;
        }
        .jstarfont{
          margin-right: 10px;
        }
        .jstar-baobiao1{
          font-size: 20px;
        }
        .labelName{
          width: 100px;
        }
        .iconBox{
          color: #409EFF;
          font-size: 18px;
          i{
            margin: 0 3px;
          }
        }
      }
    }
  }
  .iframeBox{
    height: 100%;
    overflow: hidden;
    .emptyBox{
      height: 100%;
      width: 100%;
    }
    iframe{
      height: 100%;
      width: 100%;
    }
  }
}
</style>